<template>
  <div>
    <el-table :data="winList" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="id" label="ID" sortable width="80">
      </el-table-column>
      <el-table-column prop="rolename" label="角色名称">
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="edit(scope.row)">修改</el-button>
          <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { delRoleById } from '@/api/index'
export default {
  name: 'MyList',
  props: ['winList'],
  methods: {
    del (id) {
      this.$confirm('此操作将永久删除，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 点击确定按钮就执行then方法中的内容
          // 此时真的删除了
          const res = await delRoleById(id)
          // eslint-disable-next-line
          if (res.code == 200) {
            // 删除成功后的弹窗
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.updat()
          }
        })
        .catch(() => {
          // 点击确定按钮就执行catch方法中的内容
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    edit (info) {
      // 点击编辑按钮：要通过index组件打开indo组件并传值
      this.$emit('edit', info)
    },
    // 删除完毕之后，自动请求更新一次页面
    updat () {
      this.$emit('update')
    }
  }
}
</script>

<style lang="less" scoped>
</style>
